<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <caption>个人简介</caption>
    <tr>
      <td>照片:</td>
      <td><img :src="person.imgUrl" width="100"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="fName in person.friends">{{fName}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadData()">点击加载数据</button>

</template>


<script setup>
//准备一个空对对象
import {ref} from "vue";
// 用来准备一个空对象来保存数据
const person = ref({name:'',age:'',imgUrl:'',friends:[]});
const loadData = ()=>{
  person.value= {
  name :'传奇哥',
  age:18,
  friends:['小明','小哥','小红'],
  imgUrl:'fcq.jpg'
  };
}

</script>



<style scoped>

</style>